<template>
  <div style="">
    <Header :left="true" leftText="返回" title="中途调岗"> </Header>
    <NoticeBar
      color="#1989fa"
      background="#ecf9ff"
      style="margin-top: 5px; font-size: 15px; font-weight: bold"
      left-icon="description"
      >选择员工</NoticeBar
    >
    <van-form :style="autoHeight" @submit="onSubmit">
      <van-field
        required
        readonly
        class="formstyle"
        name="picker"
        :value="valuepline"
        label="生产线选择"
        placeholder="点击选择产线"
        @click="showPickerpline = true"
      />
      <van-popup v-model="showPickerpline" position="bottom">
        <van-picker
          show-toolbar
          :columns="columnspline"
          @confirm="onConfirmpline"
          @cancel="showPickerpline = false"
        >
          <template #option="option">
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <div>{{ option.plineName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>
      <!--
      <van-field
        required
        readonly
        class="formstyle"
        name="picker"
        :value="valueteamid"
        label="班组选择"
        placeholder="点击选择班组"
        @click="pickTeam"
      />
      <van-popup v-model="showPickerteamid" position="bottom">
        <van-picker
          show-toolbar
          :columns="columnsteamId"
          @confirm="onConfirmteamid"
          @cancel="showPickerteamid = false"
        >
        <template #option="option">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <div>{{ option.teamName }}</div>
          </div>
        </template>
      </van-picker>
      </van-popup>
-->
      <van-field
        required
        readonly
        class="formstyle"
        name="picker"
        :value="valueemployid"
        label="员工选择"
        placeholder="点击选择员工"
        @click="pickemploy"
      />
      <van-popup v-model="showPickeremployid" position="bottom">
        <van-picker
          show-toolbar
          :columns="columnsemployid"
          @confirm="onConfirmemployid"
          @cancel="showPickeremployid = false"
        >
          <template #option="option">
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <div>{{ option.employeename }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>
      <NoticeBar
        color="#1989fa"
        background="#ecf9ff"
        style="margin-top: 5px; font-size: 15px; font-weight: bold"
        left-icon="description"
        >选择岗位</NoticeBar
      >
      <van-field
        required
        readonly
        class="formstyle"
        name="picker"
        :value="valueplinenew"
        label="生产线选择"
        placeholder="点击选择调岗生产线"
        @click="showPickerplinenew = true"
      />
      <van-popup v-model="showPickerplinenew" position="bottom">
        <van-picker
          show-toolbar
          :columns="columnsplinenew"
          @confirm="onConfirmplinenew"
          @cancel="showPickerplinenew = false"
        >
          <template #option="option">
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <div>{{ option.plineName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>
      <van-field
        required
        class="formstyle"
        v-model="form.reasons"
        name="调用原因"
        label="调用原因"
        placeholder="请填写原因"
        :rules="[{ required: true, message: '请填写原因' }]"
      />
      <div style="margin: 16px">
        <van-button color="#138087" round block type="info" native-type="submit"
          >调岗确认</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient as _httpClientApisie } from "@/libs/apisie";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);

export default {
  name: "thepost",
  components: {
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },
  data() {
    return {
      form: {
        valuepline: "",
        valueplinenew: "",
        valueteamid: "",
        valueemployid: "",
        reasons: "",
      },
      valuepline: "",
      columnspline: [
        { plineid: "01", plinename: "产线一" },
        { plineid: "02", plinename: "产线二" },
        { plineid: "03", plinename: "产线三" },
      ],
      showPickerpline: false,
      valueplinenew: "",
      columnsplinenew: [
        { plineid: "01", plinename: "产线一" },
        { plineid: "02", plinename: "产线二" },
        { plineid: "03", plinename: "产线三" },
      ],
      showPickerplinenew: false,
      valueteamid: "",
      columnsteamId: [
        { teamid: "01", teamname: "班组一" },
        { teamid: "02", teamname: "班组二" },
        { teamid: "03", teamname: "班组三" },
      ],
      showPickerteamid: false,
      valueemployid: "",
      columnsemployid: [
        { employid: "01", employeename: "员⼯⼀" },
        { employid: "100999", employeename: "员⼯二" },
        { employid: "03", employeename: "员⼯三" },
      ],
      employeeList: [],
      dataList: [],
      showPickeremployid: false,
      reasons: "",
      showPickerdatetime: false,
    };
  },

  created: function () {
    this.user = JSON.parse(storage.get("user"));
    this.user.userId = this.user.userName;
    // this.getFactoryID().then(response => {
    //   this.getPline();
    // })
    this.getPline();
    //获取班组信息
    //this.getteam();
    this.getEmployeeList();
  },
  async mounted() {},

  methods: {
    itemClear() {
      this.form.valuepline = "";
      this.form.valueplinenew = "";
      this.form.valueteamid = "";
      this.form.valueemployid = "";
      this.form.reasons = "";
      this.valuepline = "";
      this.columnspline = [
        { plineid: "01", plinename: "产线一" },
        { plineid: "02", plinename: "产线二" },
        { plineid: "03", plinename: "产线三" },
      ];
      this.valueplinenew = "";
      this.columnsplinenew = [
        { plineid: "01", plinename: "产线一" },
        { plineid: "02", plinename: "产线二" },
        { plineid: "03", plinename: "产线三" },
      ];
      this.valueteamid = "";
      this.columnsteamId = [
        { teamid: "01", teamname: "班组一" },
        { teamid: "02", teamname: "班组二" },
        { teamid: "03", teamname: "班组三" },
      ];
      this.valueemployid = "";
      this.columnsemployid = [
        { employid: "01", employeename: "员⼯⼀" },
        { employid: "100999", employeename: "员⼯二" },
        { employid: "03", employeename: "员⼯三" },
      ];
      this.employeeList = [];
      this.dataList = [];
      this.reasons = "";
    },
    pickemploy() {
      if (this.valuepline != "") {
        this.getonworkemployee();
        this.showPickeremployid = true;
      } else {
        Toast.fail("请先选择生产线!");
      }
    },
    //获取工厂信息
    async getFactoryID() {
      let _this = this;
      // try {
      //   let res = await _httpClientApi.get(
      //     _httpClientApi.getApiPrefix() + '/system/ConvertFactoryID/getList/' + _this.user.site,
      //   );
      //   if (res.code === 200) {
      _this.user.site = "TC00"; //res.data.sapfactoryid;
      //   }
      // } catch (e) {
      //   Toast.fail(JSON.stringify(e));
      // }
    },
    /* pickTeam(){
      if(this.valuepline != ''){
        this.columnsemployid = "";
        this.showPickerteamid = true;
      }else{
        Toast.fail("请先选择生产线!");
      }
    }, */
    onConfirmpline(value, index) {
      this.valuepline = value;
      this.form.valuepline = this.columnspline[index].plineId;
      this.valuepline = this.columnspline[index].plineName;
      this.valueemployid = "";
      this.showPickerpline = false;
    },
    onConfirmplinenew(value, index) {
      this.form.valueplinenew = this.columnsplinenew[index].plineId;
      this.valueplinenew = this.columnsplinenew[index].plineName;
      this.showPickerplinenew = false;
    },
    onConfirmemployid(value, index) {
      this.form.valueemployid = this.columnsemployid[index].employid;
      this.valueemployid = this.columnsemployid[index].employeename;
      this.getworkrecordlist(this.form.valueemployid);
      this.showPickeremployid = false;
    },
    /* onConfirmteamid(value,index) {
      this.form.valueteamid = this.columnsteamId[index].teamId;
      this.valueteamid = this.columnsteamId[index].teamName;
      this.showPickerteamid = false;
    }, */
    //获取生产线
    async getPline() {
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() +
            "/PLineEquipment/GetList?FactoryID=TC00"
        );
        if (res.HttpCode === "200") {
          //alert(JSON.stringify(res));
          let teamMap = res.Data.map((item) => ({
            plineId: item.PLineID,
            plineName: item.PLineName,
          }));
          _this.columnspline = teamMap;
          _this.columnsplinenew = teamMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取班组信息
    /* async getteam(){
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() + "/Team/GetList?FactoryID="+ _this.user.site,
        );
        if (res.HttpCode === "200") {
          
          let teamMap = res.Data.map(item =>({teamId: item.TeamID, teamName: item.TeamName}))
          _this.columnsteamId = teamMap
        }
       
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    }, */
    //获取员工列表
    async getEmployeeList() {
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() + "/Employee/GetList"
        );
        if (res.HttpCode === "200") {
          this.employeeList = res.Data.map((item) => ({
            employid: item.EmployeeID,
            employeename: item.EmployeeName,
          }));
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取在岗员工
    async getonworkemployee() {
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() +
            "/EmployeeWorkingRecord/GetOnWorkEmployee?FactoryID=TC00&OnPositionFlag=true&PlineID=" +
            _this.form.valuepline
        );
        if (res.HttpCode === "200") {
          let arr2 = res.Data.map((item) => ({ employId: item.EmployeeID }));
          let arr3 = [];
          arr2.forEach((item2) => {
            this.employeeList.forEach((item1) => {
              if (item1.employid.trim() === item2.employId.trim()) {
                arr3.push(item1);
              }
            });
          });
          let c = [];
          arr3.forEach((element, index) => {
            if (contrast(element, c)) {
              c.push(element);
            }
          });
          this.columnsemployid = c;
          function contrast(map, listA) {
            let a = true;
            listA.forEach((element, index) => {
              if (element.employid === map.employid) {
                a = false;
              }
            });
            return a;
          }
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //确认调岗
    async onSubmit() {
      let _this = this;
      _this.dataList.reasons = _this.form.reasons;
      try {
        let res = await _httpClientApisie.post(
          _httpClientApisie.getApiPrefix() +
            "/EmployeeWorkingRecord/ThePostEmployee?NewPLineID=" +
            _this.form.valueplinenew,
          {
            body: _this.dataList,
          }
        );
        if (res.HttpCode === "200") {
          Toast.success("调岗成功");
          this.itemClear();
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取员工打卡记录
    async getworkrecordlist(employeeID) {
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() +
            "/EmployeeWorkingRecord/GetWorkRecordList?OnPositionFlag=True&FactoryID=" +
            "TC00" +
            "&EmployeeID" +
            employeeID +
            "&PlineID" +
            _this.form.valuepline
        );

        if (res.HttpCode === "200") {
          let total = res.Total;
          _this.dataList = res.Data[total - 1];
           //Toast.fail("成功" +  _this.dataList.EmployeeID);
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>

<style>
body {
  background-color: white;
}

.table-title-class {
  background-color: #304156;
  color: #fff;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.buttongroup {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}

.formstyle {
  margin-top: 8px;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.radioteam {
  display: flex;
  align-items: center;
  padding-left: 13px;
  margin-top: 10px;
  margin-left: 34px;
  margin-bottom: 10px;
}

.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 50%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.mg5 {
  margin-right: 5px;
}

.tag_margin {
  margin: 2px 5px;
}

.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}

.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}

.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}

.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
</style>
